Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / relay / RelayMessageEntry.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"entry.type === 'dateDivider'"

Te6edf3class=Ta5d6ff"flex items-center justify-center gap-3 w-full my-3 shrink-0 px-2 select-none"

Te6edf3role=Ta5d6ff"separator"

Te6edf3:aria-label=Ta5d6ff"page.formatDateDividerLabel(entry.dayKey)"

Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"h-px w-10 shrink-0 bg-sem-border sm:w-14" Te6edf3aria-hidden=Ta5d6ff"true" Tff7b72/>

Tff7b72<span

Te6edf3class=Ta5d6ff"max-w-[min(100%,18rem)] text-center text-[11px] font-medium leading-snug tracking-wide text-sem-fg-muted"

Tff7b72>

Tff7b72{{ Te6edf3pageTe6edf3.formatDateDividerLabelTff7b72(Te6edf3entryTe6edf3.dayKeyTff7b72) Tff7b72}}

Tff7b72</span>

Tff7b72<span Te6edf3class=Ta5d6ff"h-px w-10 shrink-0 bg-sem-border sm:w-14" Te6edf3aria-hidden=Ta5d6ff"true" Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3v-else-if=Ta5d6ff"entry.type === 'presenceGroup'" Te6edf3class=Ta5d6ff"px-2 py-1"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"mx-auto flex max-w-full items-center gap-1 rounded-md px-2 py-0.5 text-xs italic text-sem-fg-muted transition-colors hover:bg-sem-surface/50 hover:text-sem-fg"

Te6edf3:aria-expanded=Ta5d6ff"expanded"

@Te6edf3click=Ta5d6ff"page.togglePresenceGroup(entry.id)"

Tff7b72>

Tff7b72<MaterialDesignIcon

Te6edf3:icon-name=Ta5d6ff"expanded ? 'chevron-down' : 'chevron-right'"

Te6edf3class=Ta5d6ff"size-3.5 shrink-0 opacity-70"

Tff7b72/>

Tff7b72<span Te6edf3class=Ta5d6ff"truncate"Tff7b72>Tff7b72{{ Te6edf3pageTe6edf3.formatPresenceGroupSummaryTff7b72(Te6edf3entryTff7b72) Tff7b72}}Tff7b72</span>

Tff7b72</button>

Tff7b72<div Te6edf3v-if=Ta5d6ff"expanded" Te6edf3class=Ta5d6ff"mt-1 space-y-0.5"Tff7b72>

Tff7b72<div

Te6edf3v-for=Ta5d6ff"(msg, idx) in entry.messages"

Te6edf3:key=Ta5d6ff"page.messageKey(msg) || idx"

Te6edf3class=Ta5d6ff"py-0.5 text-center text-xs italic text-sem-fg-muted"

Te6edf3:data-msg-key=Ta5d6ff"page.messageKey(msg)"

Tff7b72>

Tff7b72{{ Te6edf3msgTe6edf3.text Tff7b72}}

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3v-else-if=Ta5d6ff"isSystemLike"

Te6edf3class=Ta5d6ff"py-0.5 text-center text-xs italic"

Te6edf3:class=Ta5d6ff"entry.msg.kind === 'error' ? 'text-sem-danger' : 'text-sem-fg-muted'"

Te6edf3:data-msg-key=Ta5d6ff"page.messageKey(entry.msg)"

Tff7b72>

Tff7b72{{ Te6edf3entryTe6edf3.msgTe6edf3.text Tff7b72}}

Tff7b72</div>

Tff7b72<div

Te6edf3v-else-if=Ta5d6ff"entry.msg && entry.msg.kind === 'action'"

Te6edf3class=Ta5d6ff"rounded-lg px-2 py-1 text-sm italic"

Te6edf3:class=Ta5d6ff"entry.msg.mention ? 'bg-sem-warning/15' : ''"

Te6edf3:data-msg-key=Ta5d6ff"page.messageKey(entry.msg)"

Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"mr-1 text-xs text-sem-fg-muted"Tff7b72>Tff7b72{{ Te6edf3pageTe6edf3.formatTimeTff7b72(Te6edf3entryTe6edf3.msgTe6edf3.tsTff7b72) Tff7b72}}Tff7b72</span>

* Tff7b72{{ Te6edf3pageTe6edf3.displayNameTff7b72(Te6edf3entryTe6edf3.msgTff7b72) Tff7b72}}

T8b949e<!-- eslint-disable vue/no-v-html -- sanitized via renderMessageHtml -->

Tff7b72<span

Te6edf3class=Ta5d6ff"break-words"

@Te6edf3click=Ta5d6ff"page.handleMessageHtmlClick($event)"

Te6edf3v-html=Ta5d6ff"page.renderMessageHtml(entry.msg.text)"

Tff7b72>Tff7b72</span>

T8b949e<!-- eslint-enable vue/no-v-html -->

Tff7b72</div>

Tff7b72<div

Te6edf3v-else-if=Ta5d6ff"entry.msg"

Te6edf3class=Ta5d6ff"rounded-lg px-2 py-1 text-sm"

Te6edf3:class=Ta5d6ff"entry.msg.mention ? 'bg-sem-warning/15' : 'hover:bg-sem-surface/40 dark:hover:bg-sem-surface/20'"

Te6edf3:data-msg-key=Ta5d6ff"page.messageKey(entry.msg)"

@Te6edf3contextmenu.prevent=Ta5d6ff"page.openMessageContextMenu($event, entry.msg)"

Tff7b72>

Tff7b72<span Te6edf3class=Ta5d6ff"mr-1.5 text-xs text-sem-fg-muted"Tff7b72>Tff7b72{{ Te6edf3pageTe6edf3.formatTimeTff7b72(Te6edf3entryTe6edf3.msgTe6edf3.tsTff7b72) Tff7b72}}Tff7b72</span>

Tff7b72<span Te6edf3class=Ta5d6ff"mr-1.5 font-semibold" Te6edf3:style=Ta5d6ff"page.nameStyle(entry.msg)"Tff7b72>Tff7b72{{ Te6edf3pageTe6edf3.displayNameTff7b72(Te6edf3entryTe6edf3.msgTff7b72) Tff7b72}}:Tff7b72</span>

T8b949e<!-- eslint-disable vue/no-v-html -- sanitized via renderMessageHtml -->

Tff7b72<span

Te6edf3class=Ta5d6ff"whitespace-pre-wrap break-words"

@Te6edf3click=Ta5d6ff"page.handleMessageHtmlClick($event)"

Te6edf3v-html=Ta5d6ff"page.renderMessageHtml(entry.msg.text)"

Tff7b72>Tff7b72</span>

T8b949e<!-- eslint-enable vue/no-v-html -->

Tff7b72</div>

Tff7b72</template>

Tff7b72<script setupTff7b72>

import { computed } from "vue";

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

const props = defineProps({

entry: {

type: Object,

required: true,

},

page: {

type: Object,

required: true,

},

});

const isSystemLike = computed(() => {

const kind = props.entry?.msg?.kind;

return kind === "system" || kind === "notice" || kind === "error";

});

const expanded = computed(() => {

if (props.entry?.type !== "presenceGroup") {

return false;

}

return props.page.isPresenceGroupExpanded(props.entry.id);

});

Tff7b72</script>